<template>
  <div class="detail-page">
    <div class="tupian">
      <img src="@/assets/kaokebg.png" alt="" />
      <!-- 头像 -->
      <div class="box">
        <div class="HeadSculpture">
          <div class="HeadSculpture1">
            <img src="@/assets/avatar.png" alt="" />
          </div>
        </div>

        <div class="characters">游客</div>
        <!-- 登录按钮 -->
        <van-button
          round
          type="info"
          to="login"
          class="logon"
          size="small"
          color="#21b97a"
        >
          去登陆
        </van-button>
      </div>
    </div>
    <!-- 宫格 -->
    <div class="grid">
      <!-- 宫格 -->
      <van-grid :column-num="3" :gutter="20" :border="false">
        <van-grid-item icon="star-o" text="我的收藏" to="/CollectionHouse" />
        <van-grid-item icon="wap-home-o" text="我的出租" to="/rentalhousing" />
        <van-grid-item icon="underway-o" text="看房记录" />
        <van-grid-item icon="notes-o" text="成为房主" />
        <van-grid-item icon="contact" text="个人资料" />
        <van-grid-item icon="service-o" text="联系我们" />
      </van-grid>
    </div>
    <!-- 图片 -->
    <div class="join">
      <img src="@/assets/join.png" alt="" background-image />
    </div>
  </div>
</template>

<script>
export default {
  name: 'user-page',
  data () {
    return {}
  },
  async created () {},
  methods: {}
}
</script>
<style lang="less" scoped>
.tupian {
  display: flex;
  position: relative;
  img {
    width: 100%;
  }
}
.box {
  display: flex;
  position: absolute;
  margin-top: 140px;
  margin-left: 30px;
  width: 319px;
  height: 165px;
  background-color: #fff;
  box-shadow: 0 0 10px 3px #ddd;
  .HeadSculpture {
    width: 60px;
    height: 60px;
    margin-top: -30px;
    margin-left: 130px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 2px 2px #bdbdbd;
    .HeadSculpture1 {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      margin-top: 5px;
      margin-left: 5px;
      // background-color: #f8ffab;
    }
  }
  .characters {
    margin-top: 55px;
    margin-left: -44px;
    font-size: 14px;
  }
  .logon {
    width: 70px;
    height: 30px;
    margin-top: 90px;
    margin-left: -50px;
    border-radius: 13%;
    background-color: #21b97a;
  }
}
.grid {
  width: 100%;
  display: flex;
  position: absolute;
  margin-top: 130px;
}
.join {
  width: 345px;
  height: 85px;
  margin-top: 335px;
  margin-left: 15px;
  background-color: #f5b3b3;
  img {
    width: 100%;
  }
}
</style>
